<template>
	<view class="content">
		<view class="select">
			<view class="item">
				<text>选择投诉服务人员</text>
				<ms-dropdown-menu><ms-dropdown-item  v-model="value1" :list="list1"></ms-dropdown-item></ms-dropdown-menu>
			</view>
			<view class="line"></view>
			<view class="item">
				<text>选择投诉村负责人</text>
				<ms-dropdown-menu><ms-dropdown-item  v-model="value2" :list="list2"></ms-dropdown-item></ms-dropdown-menu>
			</view>
		</view>
		<view class="compalin">
			<view class="title">填写投诉内容</view>
			<textarea v-if="text_show" class="textarea" v-model="input" value="" placeholder="填写投诉内容" />
			<view v-else class="textarea" style="color: #999999;padding-top: 27rpx;">{{ input ? input : '填写投诉内容' }}</view>
			<view class="bot">
				<text>提交至：</text>
				<u-radio-group style="flex:1;" v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" active-color="#3FC377" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="footer" @click="submit">提交</view>
	</view>
</template>

<script>
import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue';
import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue';
export default {
	components: {
		msDropdownMenu,
		msDropdownItem
	},
	data() {
		return {
			list1: [],
			value1: 0,
			list2: [],
			value2: 0,
			list: [
				// {
				// 	name: '乡负责人',
				// 	disabled: false
				// },
				{
					name: '平台',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '乡负责人',
			input: '', //投诉内容
			text_show: true
		};
	},
	onLoad() {
		this.loadData();
		this.changeShow();
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		changeShow() {
			this.$http.post('/api/userinfo/serveuser').then(res => {
				let test = Object.entries(res.data.data);
				// console.log(test);
				let arr = Object.entries(res.data.data);
				
				arr.forEach((item,index) => {
					this.list1.push({
						text: item[1].nickname,
						value: item[1].user_id
					});
				});
				console.log(this.list1)
			});
			this.$http.post('/api/userinfo/streeruser').then(res => {
				let test2 = Object.entries(res.data.data);
				 console.log(test2);
				 let arr2 = Object.entries(res.data.data);
				 arr2.forEach((item, index) => {
				 	this.list2.push({
				 		text: item[1].nickname,
				 		value: item[1].user_id
				 	});
				 });
				// for (var i = 0; i < res.data.data.data.length; i++) {
				// 	this.list2.push({
				// 			text: res.data.data.data[i].nickname,
				// 			value2: res.data.data.data[i].user_id
				// 		});
				// 		// console.log(this.list2);
				// }
				});
		},
		submit() {
			// console.log(this.value1)
			// console.log(this.value2)
			if (this.value1 === 0 && this.value2 === 0) {
				this.$u.toast('请选择投诉人员');
				return;
			}
			if (this.input === '') {
				this.$u.toast('请填写投诉内容');
				return;
			}
			this.$http.post('/api/index/tousu', {
					serve_user_id: this.value1 != 0 ?this.value1: null,
					area_user_id: this.value2 != 0 ? this.value2: null,
					content: this.input,
					c_type: this.value == '乡负责人' ? '1' : '2'
				})
				.then(res => {
					 console.log(res)
					this.$u.toast('投诉成功');
					uni.navigateBack({
						delta: 1
					});
				});
		},
		loadData() {
			this.$http.post('/api/index/userlist', { type: 1 }).then(res => {
				for (var i = 0; i < res.data.data.length; i++) {
					this.$set(res.data.data[i], 'text', res.data.data[i].nickname);
					this.$set(res.data.data[i], 'value', i + 1);
				}
				this.list1 = res.data.data;
				// let obj = {
				// 	text: '无',
				// 	value: 0,
				// 	id: 0
				// }
				// this.list1.unshift(obj)
			});
			this.$http.post('/api/index/userlist', { type: 2 }).then(res => {
				for (var i = 0; i < res.data.data.length; i++) {
					this.$set(res.data.data[i], 'text', res.data.data[i].nickname);
					this.$set(res.data.data[i], 'value', i + 1);
				}
				this.list2 = res.data.data;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: rgba(248, 248, 248, 1);
	padding: 30rpx;
	box-sizing: border-box;
}
.select {
	background: rgba(255, 255, 255, 1);
	border-radius: 20px;
	width: 690rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	.line {
		height: 1px;
		background: rgba(0, 0, 0, 1);
		opacity: 0.1;
		margin: 30rpx auto;
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
	}
}
.compalin {
	margin-top: 30rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 20px;
	padding: 30rpx;
	box-sizing: border-box;
	.title {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}
}
.textarea {
	background: rgba(245, 245, 245, 1);
	border-radius: 20px;
	padding: 30rpx;
	box-sizing: border-box;
	height: 350rpx;
	margin: 20rpx 0 30rpx;
	width: 100%;
}
.bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
}
.footer {
	width: 535rpx;
	height: 88rpx;
	background: rgba(63, 195, 119, 1);
	border-radius: 10px;
	margin: 70rpx auto;
	line-height: 88rpx;
	text-align: center;
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
}
</style>
